<template>
    <div class="row">
        <div class="col-4">
            <a v-for="item in data" :key="item.id" class="mt-2"
                :class="[item.meta.isActive ? 'active' : '']" @click="handler(item.path)">
                <span :class="item.meta.icon" class="item"></span>
                <span class="mx-2">{{ item.meta.label }}</span>
                <br></a>
        </div>
        <div class="col-8">
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup>

import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter()

const data = ref(router.getRoutes().filter(route => /^\/home\//.test(route.path)))


const handler = (path) => {
    data.value.find(item=>{item.meta.isActive =item.path == path})
    router.push({ path: path })
}

</script>

<style  scoped>
.active {
    color: blue;
}


a {
    color: black;
    text-decoration: none;
}
</style>